<template>
	<view class="page">
		<view class="wrap" :style="{width:col*35+'px'}">
			<!-- 难易度 -->
			<view class="menu">
				<picker @change="bindPickerChange" :value="levelIndex" :range="levelList" range-key="label">
					<view class="picker">{{levelList[levelIndex].label}}</view>
				</picker>
			</view>
			<view class="row" v-for="(item,index) in gridList" :key="index">
				<view class="grid"
					:class="[item1.isMine&&item1.status===99?'mine':'','digital'+item1.nearMineCount,'grid'+item1.status,item.status!==99?'cover':'']"
					v-for="(item1,index1) in item" :key="index1" @mousedown="clickGrid(index,index1,$event)"
					:data-x="index1" :data-y="index" @contextmenu.prevent>
					{{!item1.isMine&&item1.nearMineCount&&item1.status===99?item1.nearMineCount:''}}
				</view>
			</view>
			<view class="buttons">
				<button type="primary" size="mini" @tap="toBegin">重新开始</button>
				<view class="pit">{{lastMines}}</view>
			</view>
		</view>

		<view class="modal" v-if="modalShow">
			<view class="content">
				<view class="input-wrap">
					<text class="title">行数</text>
					<input type="number" class="input" v-model="inputRow" placeholder="行数" />
				</view>
				<view class="input-wrap">
					<text class="title">列数</text>
					<input type="number" class="input" v-model="inputCol" placeholder="列数" />
				</view>
				<view class="input-wrap">
					<text class="title">雷数</text>
					<input type="number" class="input" v-model="inputMines" placeholder="雷数" />
				</view>
				<button type="primary" size="mini" @tap="customConfirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				levelList: [{
						id: 'mine1',
						label: '初级',
						row: 9,
						col: 9,
						mines: 10,
						isBegin: false // 如果是true,将会在生成格子后就开始布雷
					},
					{
						id: 'mine2',
						label: '中级',
						row: 16,
						col: 16,
						mines: 40,
						isBegin: false
					},
					{
						id: 'mine3',
						label: '高级',
						row: 16,
						col: 30,
						mines: 99,
						isBegin: false
					},
					{
						id: 'cusMine',
						label: '自定义',
						row: 16,
						col: 30,
						mines: 99,
						isBegin: false
					},
					{
						id: 'character1',
						label: '人品大检验之一颗雷',
						row: 16,
						col: 30,
						mines: 1,
						isBegin: true
					},
					{
						id: 'character2',
						label: '人品大检验之十颗雷',
						row: 16,
						col: 30,
						mines: 10,
						isBegin: true
					}
				],
				levelIndex: 0,
				id: '',
				row: 0,
				col: 0,
				mines: 0,
				lastMines: 0,
				gridList: [],
				mineList: [],
				modalShow: false,
				inputRow: 0,
				inputCol: 0,
				inputMines: 0,
				isFinish: false
			}
		},
		onLoad() {
			this.row = this.levelList[0].row
			this.col = this.levelList[0].col
			this.mines = this.levelList[0].mines
			this.lastMines = this.levelList[0].mines

			this.createGrid()
		},
		methods: {
			toBegin() {
				this.isFinish = false
				this.mineList = []
				this.createGrid()

				if (this.levelList[this.levelIndex].isBegin) {
					this.createMine(-1, -1)
					this.landMine()
				}
			},
			// 创建格子
			createGrid() {
				this.gridList = []
				for (let i = 0; i < this.row; i++) {
					let t_arr = []
					for (let j = 0; j < this.col; j++) {
						t_arr.push({
							isMine: false, // 是否是地雷
							nearMineCount: 0, // 周边地雷个数
							status: 0 //格子状态：未揭开0，插旗1，问号2，踩到雷3，揭开99
						})
					}
					this.gridList.push(t_arr)
				}
			},
			// 创建地雷
			createMine(i, j) {
				let t_x, t_y, t_join, t_list = []
				let mines = this.mines
				while (mines > 0) {
					t_x = Math.floor(Math.random() * this.row)
					t_y = Math.floor(Math.random() * this.col)
					t_join = t_x + ',' + t_y
					if ((t_x < i - 1 || t_x > i + 1 || t_y < j - 1 || t_y > j + 1) && !t_list.includes(t_join)) {
						t_list.push(t_join)
						mines--
					}
				}
				this.mineList = Array.from(new Set(t_list))
			},
			// 埋地雷
			landMine() {
				let t_x, t_y
				let t_gridList = JSON.parse(JSON.stringify(this.gridList))
				this.mineList.map(item => {
					t_x = parseInt(item.split(',')[0])
					t_y = parseInt(item.split(',')[1])
					t_gridList[t_x][t_y].isMine = true

					if (t_x > 0 && t_y > 0) {
						t_gridList[t_x - 1][t_y - 1].nearMineCount += 1
					}
					if (t_x > 0) {
						t_gridList[t_x - 1][t_y].nearMineCount += 1
					}
					if (t_x > 0 && t_y < this.col - 1) {
						t_gridList[t_x - 1][t_y + 1].nearMineCount += 1
					}
					if (t_y > 0) {
						t_gridList[t_x][t_y - 1].nearMineCount += 1
					}
					if (t_y < this.col - 1) {
						t_gridList[t_x][t_y + 1].nearMineCount += 1
					}
					if (t_x < this.row - 1 && t_y > 0) {
						t_gridList[t_x + 1][t_y - 1].nearMineCount += 1
					}
					if (t_x < this.row - 1) {
						t_gridList[t_x + 1][t_y].nearMineCount += 1
					}
					if (t_x < this.row - 1 && t_y < this.col - 1) {
						t_gridList[t_x + 1][t_y + 1].nearMineCount += 1
					}
				})
				this.gridList = t_gridList
				console.log(this.gridList);
			},
			// 格子辐射状打开
			openGrid(i, j, isLeaf = false) {
				if (this.gridList[i][j].status === 99) {
					return
				}
				this.gridList[i][j].status = 99

				if (isLeaf ||
					this.gridList[i][j].nearMineCount !== 0 ||
					i === 0 || i === this.gridList.length ||
					j === 0 || j === this.gridList[i].length) {
					return
				}
				let t_gridList = JSON.parse(JSON.stringify(this.gridList))
				if (i > 0 && j > 0) {
					this.openGrid(i - 1, j - 1, t_gridList[i - 1][j - 1].nearMineCount !== 0)
				}
				if (i > 0) {
					this.openGrid(i - 1, j, t_gridList[i - 1][j].nearMineCount !== 0)
				}
				if (i > 0 && j < t_gridList[i].length - 1) {
					this.openGrid(i - 1, j + 1, t_gridList[i - 1][j + 1].nearMineCount !== 0)
				}
				if (j > 0) {
					this.openGrid(i, j - 1, t_gridList[i][j - 1].nearMineCount !== 0)
				}
				if (i < t_gridList.length - 1 && j > 0) {
					this.openGrid(i + 1, j - 1, t_gridList[i + 1][j - 1].nearMineCount !== 0)
				}
				if (i < t_gridList.length - 1) {
					this.openGrid(i + 1, j, t_gridList[i + 1][j].nearMineCount !== 0)
				}
				if (j < t_gridList[i].length - 1) {
					this.openGrid(i, j + 1, t_gridList[i][j + 1].nearMineCount !== 0)
				}
				if (i < t_gridList.length - 1 && j < t_gridList[i].length - 1) {
					this.openGrid(i + 1, j + 1, t_gridList[i + 1][j + 1].nearMineCount !== 0)
				}
			},
			// 点击格子
			clickGrid(i, j, e) {
				const self = this
				// 点了左键
				if (event.button == 0) {
					// 如果没布过雷才进行创雷和布雷
					if (this.mineList.length === 0) {
						this.createMine(i, j)
						this.landMine()
						this.openGrid(i, j)
					} else {
						if (this.isFinish) {
							return false
						}

						let curLevel = this.levelList[this.levelIndex]
						// 人品大检验
						if (curLevel.id === 'character1' || curLevel.id === 'character2') {
							// 打开当前格子
							this.gridList[i][j].status = 99
							// 显示雷所在的格子
							this.gridList = this.gridList.map((item, index) => {
								item.map((subItem, subIndex) => {
									subItem.status = subItem.isMine ? 3 : subItem.status
									return subItem
								})
								return item
							})
							let curCoordinate = `${i},${j}`
							if (this.mineList.includes(curCoordinate)) {
								this.isFinish = true
								uni.showModal({
									content: '您的人品真好，可以买彩票了呢！要再来一局吗？',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											self.toBegin()
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							} else {
								this.isFinish = true
								uni.showModal({
									content: '恭喜你，没有踩到雷呢！要再来一局吗？',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											self.toBegin()
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}

							return false
						}

						if (this.gridList[i][j].isMine) {
							// 点到雷时的炸开效果
							this.gridList = this.gridList.map(item => {
								item.map(subItem => {
									subItem.status = subItem.isMine ? 3 : subItem.status
									return subItem
								})
								return item
							})

							this.isFinish = true
							uni.showModal({
								content: '再来一局？',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										self.toBegin()
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})

							return false
						} else {
							this.openGrid(i, j)
						}
					}

					this.checkMine()
				}
				// 点了滚轮
				else if (event.button == 1) {}
				// 点了右键
				else if (event.button == 2) {
					if (this.gridList[i][j].status !== 99) {
						this.gridList[i][j].status = this.gridList[i][j].status === 2 ? 0 : this.gridList[i][j].status + 1
					}

					this.checkMine()
				}
				this.$forceUpdate()
			},
			// 检验是否扫雷完成并根据插旗更新剩余雷数
			checkMine() {
				let t_lastMines = 0
				let t_lastCover = 0
				this.gridList.map(item => {
					item.map(item1 => {
						t_lastMines += item1.status === 1 ? 1 : 0
						t_lastCover += item1.status !== 99 ? 1 : 0
					})
				})
				this.lastMines = this.mines - t_lastMines

				if (t_lastCover === this.mines) {
					this.isFinish = true
					uni.showModal({
						content: '你真是太棒了，要再来一局吗？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								self.toBegin()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			bindPickerChange(e) {
				console.log(e);
				let value = e.detail.value
				this.levelIndex = value
				this.id = this.levelList[value].id

				this.modalShow = false
				if (this.id === 'cusMine') {
					this.modalShow = true
					this.inputRow = this.levelList[value].row
					this.inputCol = this.levelList[value].col
					this.inputMines = this.levelList[value].mines
				} else {
					this.row = this.levelList[value].row
					this.col = this.levelList[value].col
					this.mines = this.levelList[value].mines
					this.lastMines = this.levelList[value].mines
					this.toBegin()
				}
			},
			customConfirm() {
				this.modalShow = false
				this.row = this.inputRow
				this.col = this.inputCol
				this.mines = this.inputMines
				this.lastMines = this.inputMines
				this.toBegin()
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #DAE1EB;
		overflow: scroll;
	}

	.wrap {
		margin: 20px auto;

		.menu {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.picker {
				width: 180px;
				height: 36px;
				line-height: 36px;
				margin: 20px;
				padding: 0 5px;
				background-color: #FFFFFF;
			}
		}

		.row {
			overflow: hidden;

			.grid {
				float: left;
				width: 33px;
				height: 33px;
				border: 1px solid #080516;
				text-align: center;
				line-height: 33px;
			}

			.cover {
				background-color: #3F5DC1;
				box-shadow: inset 0px 0px 3px 1px #c4d3f7,
					inset 5px -8px 5px 0px #273aac,
					inset -5px -8px 3px 0px #c0c9f3,
					inset 6px -6px 9px 0px #273aac,
					inset -10px -10px 14px 0px #97a9ec;
				// transition-property:background;
				// transition-duration:0.5s;
				// transition-delay: 2s;
			}

			// 未揭开
			.grid0 {}

			// 插旗
			.grid1 {
				background-image: url(../../static/flag.png);
				background-position: center;
				background-size: 100%;
			}

			// 不确定-问号
			.grid2 {
				background-image: url(../../static/uncertain.png);
				background-position: center;
				background-size: 100%;
			}

			// 踩到雷
			.grid3 {
				background-image: url(../../static/mine.png);
				background-position: center;
				background-size: 100%;
			}

			// 揭开
			.grid99 {
				background-color: #BFCADF;
				box-shadow: 0px 0px 4px 2px #dde3ef inset;
			}

			.mine {
				background-image: url(../../static/mine.png);
				background-position: center;
				background-size: 100%;
			}

			.digital1 {
				color: #4654A5;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital2 {
				color: #1F6407;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital3 {
				color: #A4080A;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital4 {
				color: #030480;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital5 {
				color: #800000;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital6 {
				color: #3A7474;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital7 {
				color: #4654A5;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}

			.digital8 {
				color: #4654A5;
				font-weight: bold;
				font-size: 33px;
				font-family: 思源黑体 CN;
			}
		}

		.buttons {
			margin-top: 20px;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pit {
				position: relative;
				width: 60px;
				height: 30px;
				margin-right: 62px;
				line-height: 30px;
				text-align: center;
				border-radius: 4px;
				font-size: 20px;
				font-family: 思源黑体 CN;
				background-color: #2C4D8F;
				color: #FFFFFF;
				box-shadow:
					-1px -1px 3px 1px #7480a2,
					2px 2px 3px 2px #fdfdfd,
					inset 1px 1px 1px 1px #3c3a3a;

				&::before {
					content: "";
					position: absolute;
					top: -6px;
					right: -62px;
					width: 40px;
					height: 40px;
					background-image: url(../../static/mine.png);
					background-size: 100%;
					background-repeat: no-repeat;
					background-color: #FFFFFF;
					background-size: 32px;
					background-position: center;
					border-radius: 50%;
					box-shadow:
						-1px -1px 3px 1px #7480a2,
						2px 2px 3px 2px #fdfdfd,
						inset 1px 1px 1px 1px #635f5f;
				}
			}
		}
	}

	.modal {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);

		.content {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300px;
			padding: 30px;
			border-radius: 4px;
			transform: translate(-50%, -100%);
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.input-wrap {
				margin-bottom: 10px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.title {
					padding-right: 10px;
				}

				.input {
					width: 120px;
					height: 36px;
					line-height: 36px;
					padding: 0 5px;
					background-color: #eeeeee;
					text-align: center;
				}
			}
		}
	}
</style>
